<!--
 * @Author: ChunLai
 * @Date: 2023-08-02 14:11:28
 * @LastEditTime: 2025-11-20 11:38:13
 * @Description: 签字列表模块
 * @FilePath: \01.latest-short-insure\src\views\sign\components\QianZiListModule.vue
-->
<template>
  <div class="mode3">
    <div class="sign_ul">
      <div class="sign_item" v-if="tbrSignShow">
        <div class="sign_desc">
          <span class="item_l">
            投保人 <i>{{ appnt.name }}</i> 签名
          </span>
          <span
            class="item_v"
            :class="tbrSignImg ? 'isok' : ''"
            @click="startSign('1')"
          >
            {{ tbrSignImg ? "已签名" : "去签名" }}
            <van-icon name="arrow" size="12" color="#747474" />
          </span>
        </div>
        <div class="sign_img">
          <img :src="tbrSignImg" v-if="tbrSignImg" />
        </div>
      </div>
    </div>
    <div class="get_tips" @click="getStatus">
      <van-icon name="replay" /> 刷新查看签名进度
    </div>

    <SignatureBoard ref="mysign" @uploadSing="signBoardClose" v-if="openSign" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SignatureBoard from "./SignatureBoard";
export default {
  name: "QianZiListModule",
  data() {
    return {
      tbrSignImg: "",
      imgList: [],
      bbrDataList: [],
    };
  },
  components: { SignatureBoard },
  computed: {
    ...mapGetters({
      appnt: "insert/appnt",
      signTarget: "page/signTarget",
      readFinish: "readings/wholeFinish",
      openSign: "home/openSign",
      userObj: "home/userObj",
      userType: "home/userType",
    }),
    tbrSignShow() {
      let res = false;
      if (this.signTarget.includes("1")) {
        res = true;
      }
      return res;
    },
  },
  created() {
    this.$store.commit("home/CHANGE_SIGN_FLAG", false);
  },
  mounted() {
    this.$nextTick(() => {
      if (this.apiComParams.orderNum) {
        this.getStatus();
      }
    });
  },
  methods: {
    getStatus() {
      this.tbrSignImg = "";
      this.$store.commit("updateLoadTxt", "签名获取中....");
      let params = {
        ...this.apiComParams,
        type: "99",
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "queryImgList",
          toast: true,
        })
        .then((data) => {
          if (data.code == "1") {
            if (data.imgList.length > 0) {
              this.signDoneCheck(data.imgList);
            }
          }
        });
    },
    signDoneCheck(dataList) {
      let res = true;
      const resObj = dataList.find((ele) => ele.imgType == "1");
      if (resObj && resObj.imgUrl) {
        this.tbrSignImg = resObj.imgUrl;
      } else {
        res = false;
      }
      // console.log("done----", res);
      this.$store.commit("home/CHANGE_SIGN_FLAG", res);
    },
    startSign(type, index = 0) {
      if (!this.readFinish) {
        let target = document.querySelector("#protocols_module");
        target.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
        return this.$toast("请完成以上条款的阅读");
      }
      // 添加签名完成状态
      let userItem = {};
      if (type == "1") {
        userItem = this.appnt;
      }
      this.$store.commit("home/SET_SIGN_OBJ", userItem);
      this.$store.commit("home/updateField", {
        signName: `${userItem.name}`,
        userType: `${type}`,
      });
      this.$store.commit("home/CHANGE_SIGN_BOARD", true);
    },
    signBoardClose() {
      this.$store.commit("home/CHANGE_SIGN_BOARD", false);
      this.getStatus();
    },
  },
};
</script>

<style lang="less" scoped>
.sign_ul {
  padding: 0 12px;
  .sign_item {
    padding: 0 10px;
    border-radius: 10px;
    background: #ffffff;
    .sign_desc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 400;
      color: #343434;
      padding: 10px 0;
      i {
        color: #ff8d1a;
      }
      .item_v {
        color: #a6a6a6;
        &.isok {
          color: #43cf7c;
        }
      }
    }
    .sign_img {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 68px;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #ededed;
        transform: scaleY(0.5);
      }

      img {
        display: block;
        height: 68px;
        object-fit: fill;
      }
    }

    .signtips {
      font-size: 12px;
      color: #ff8d1a;
      padding-bottom: 5px;
    }
  }
}
.module_tt {
  width: 375px;
  height: 40px;
  color: #242424;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding-left: 20px;
  background: #f5f5f9;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    margin: auto;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: #da251d;
  }
}
.get_tips {
  color: #165dff;
  padding: 20px;
  text-align: center;
}
</style>
